<template>
  <div id="bigBox">
    <div class="banner-head">
      <van-swipe id="swipe" :autoplay="3000">
        <van-swipe-item v-for="(image, index) in list" :key="index">
          <img v-lazy="image.imgSrc" />
        </van-swipe-item>
      </van-swipe>
      <div class="search-head">
        <div class="search-left-head">
          <router-link to="/cityList" class="search-city-left-head">
            <div>
              上海
              <van-icon id="downIcon" size="12" name="play" /></div></router-link>

          <input type="text" placeholder="请输入小区或地址" />
        </div>
        <div @click="$router.push('/mapMap')" class="search-right-head">
          <van-icon size="24" name="location-o" />
        </div>
      </div>
    </div>
    <div class="icon-head">
      <van-grid router id="icon-icon">
        <van-grid-item to="/collect" icon="wap-home-o" text="整租" />
        <van-grid-item to="/collect" icon="friends-o" text="合租" />
        <van-grid-item to="/mapfindroom" icon="comment-o" text="地图找房" />
        <van-grid-item to="/tohire" icon="bullhorn-o" text="去出租" />
      </van-grid>
    </div>

    <div class="si-Room-Team">
      <van-cell-group>
        <van-cell id="siFangBgc" title="私房小组" value="更多" />
      </van-cell-group>

      <ul class="siList">
        <li v-for="item in res" :key="item.id">
          <div class="list-pic-left">
            <img :src="item.imgSrc" alt="" />
          </div>
          <div class="list-pic-right">
            <span>{{ item.title }}</span>
            <i>{{ item.desc }}</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { article, zhufang } from '@/api/user'
// import { filter } from 'vue/types/umd'

export default {
  name: 'article-page',
  data () {
    return {
      list: [],
      res: []
    }
  },
  created () {
    this.fn1()
    this.fn2()
  },
  // 轮播图请求
  // async created () {
  //   const data = await article()
  //   console.log(data)
  //   this.list = data.body.filter(
  //     item => (item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
  //   )
  // },

  methods: {
    async fn1 () {
      const data = await article()
      // console.log(data)
      this.list = data.body.filter(
        item => (item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
      )
    },
    async fn2 () {
      const data = await zhufang()
      // console.log(data)
      this.res = data.body.filter(
        item => (item.imgSrc = `http://liufusong.top:8080${item.imgSrc}`)
      )
    }
  }
}
</script>

<style lang="less" scoped>
#bigBox {
  background-color: #f6f5f6;
  width: 100%;
  height: 100%;
}
.banner-head {
  width: 100%;
  height: 212px;
  background-color: pink;
  position: relative;
}
#swipe {
  width: 100%;
  height: 100%;
}
#swipe img {
  width: 100%;
}
.search-head {
  width: 100%;
  height: 36px;
  position: absolute;
  top: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-left-head {
  background-color: #fff;
  width: 310px;
  height: 36px;
  border-radius: 4px;
  margin: 0 10px;
  display: flex;
}
.search-left-head input {
  flex: 8;
  background: #fff;
  outline: none;
  border: 0px;
  font-size: 13px;
  border-radius: 4px;
}
.search-left-head .search-city-left-head {
  flex: 2;
  font-size: 14px;
  color: #333;
}
.search-left-head .search-city-left-head div {
  width: 80%;
  margin: 8px 0 0 6px;
  border-right: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#downIcon {
  transform: rotate(90deg);
  color: #999;
  margin-right: 6px;
}
.search-right-head {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #fff;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-head {
  width: 100%;
  height: 123px;
}
.icon-head #icon-icon {
  height: 100%;
}
#siFangBgc {
  background-color: #f6f5f6;
}
.si-Room-Team {
  width: 100%;
  height: 190px;
}
.si-Room-Team .siList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.si-Room-Team .siList li {
  width: 172px;
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: space-between;
}
.si-Room-Team .siList .list-pic-left {
  height: 50px;
  width: 50px;
  margin: 0 10px;
  margin: 10px 0 0 12px;
}
.si-Room-Team .siList .list-pic-left img {
  width: 100%;
  height: 100%;
}
.si-Room-Team .siList li .list-pic-right {
  display: flex;
  flex-direction: column;
}
.si-Room-Team .siList li .list-pic-right span {
  margin: 10px 16px 5px 0px;
  font-size: 14px;
  color: #333;
}
.si-Room-Team .siList li .list-pic-right i {
  font-size: 12px;
  color: #333;
}
::v-deep .van-cell-group span :nth-child(1) {
  font-size: 20px;
}
</style>
